<template>
	<view class="add">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">添加收货地址</block>
		</cu-custom>
		<view class="add-form">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">收货人</view>
					<input class="uni-input" v-model="form.name" :disabled="disabled" name="input" placeholder="收货人" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">手机号码</view>
					<input class="uni-input" v-model="form.phone" :disabled="disabled" name="input" placeholder="手机号码" />
					<text class="right-icon">+86</text>
				</view>
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="uni-form-item uni-column">
					<view class="title">所在地区</view>
					<!-- <input class="uni-input" name="input" placeholder="所在地区" />
					<text class="right-icon">></text> -->
					<picker mode="region" :disabled="disabled" @change="RegionChange" v-model="form.region">
						<view class="picker" style="text-align: left;">
							{{form.region[0]}}，{{form.region[1]}}，{{form.region[2]}}
						</view>
					</picker>
					<text class="right-icon">></text>
				</view>
				<!-- #endif -->
				<view class="uni-form-item uni-column">
					<view class="title">详细地址</view>
					<input class="uni-input" v-model="form.detail" :disabled="disabled" name="input" placeholder="详细地址:如道路 门牌号 小区等" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title address-info">设为默认地址</view>
					<view class="checkBtn">
						<switch  v-model="form.is_default" name="switch" :checked="checkeds" @change="switchChange" />
					</view>
				</view>
				<view class="uni-btn-v">
					<button  @tap="submit">{{status}}</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import shops from '@/api/shop';
	export default {
		data() {
			return {
				aid:'',
				form: {
					name: '',
					address_id:'',
					phone: '',
					address: '',
					region: ['北京市', '北京市', '东城区'],
					detail: '',
					is_default: 0,
				},
				info: {},
				disabled: false,
				loading: false,
				checkeds:false,
				status: '保存'
			}
		},
		onLoad: function(option) {
			if(option.aid!=undefined && option.aid){
				this.aid = option.aid;
				this.form.address_id = option.aid;
				console.log(this.aid);
				this.getOnec();
			}
			// this.getAddress();
		},
		methods: {
			goBack() {
				 let pages = getCurrentPages(); // 当前页面
				 let beforePage = pages[pages.length - 2]; // 前一个页面
				uni.navigateBack({
					delta: 2,
					success: function() {
					     beforePage.onShow(); // 执行前一个页面的onLoad方法
					}
				});
			},
		  RegionChange(e) {
			if (this.loading || this.disabled) {
				return;
			}
			this.form.region = e.detail.value;
			console.log(e.detail.value);
		  },
		  async submit() {
		  	if (this.loading || this.disabled) {
		  		return;
		  	}
			this.form.address = this.form.region[0] + ',' + this.form.region[1] + ',' + this.form.region[2] ;
			console.log(this.form.address);
		  	this.loading = true;
		  	setTimeout(() => {
		  		this.loading = false
		  	}, 7000)
		  	shops.editsAddress(this.form).then(res => {
		  		if (res.code == 1) {
		  			this.disabled = true;
		  			this.loading = true;
		  			this.toast(res.msg);
		  			// this.status = res.msg;
					console.log('添加成功');
					this.goBack();
		  		} else {
		  			this.loading = false
		  			this.toast(res.msg);
		  		}
		  	})
		  },
		  async getOnec(){
			  let res = await shops.getOnce({
				  'address_id':this.aid
			  })
			  if(res.code == 1){
				  this.form.name = res.data.real_name;
				  this.form.phone = res.data.phone;
				  this.form.address = res.data.address[0] + ',' + res.data.address[1] + ',' + res.data.address[2] ;
				  this.form.region = res.data.address;
				  this.form.detail = res.data.detail;
				  if(res.data.is_default==1){
					  this.checkeds = true;
				  }
			  }else{
				  uni.showModal({
						title: '提示',
						content: '数据不存在!',
						showCancel:false,
						success: function (res) {
				          if (res.confirm) {
				              console.log('用户点击确定');
				          } else if (res.cancel) {
				              console.log('用户点击取消');
				          }
				      }
				  });
				  // this.goBack();
			  }
		  },
		  switchChange(e){
			  if(e.detail.value){
				  this.form.is_default = '1';
				  console.log(this.form.is_default);
			  }else{
				  this.form.is_default = '0';
				  console.log(this.form.is_default);
			  }
		      console.log('switch2 发生 change 事件，携带值为', e.detail.value)
		    }
		}
	}
</script>

<style lang="less">
	.add{
		background-color: rgb(239,239,239);
		font-family: "SimHei";
		.add-form{
			
			.uni-column{
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx solid rgb(239,239,239);
				position: relative;
				background-color: #ffffff;
				padding: 0 30rpx;
				.title{
					width: 130rpx;
					display: inline-block;
					float: left;
					color: #171717;
					font-size: 30rpx;
					
				}
				.uni-input{
					height: 80rpx;
					padding-right: 40rpx;
				}
				.picker{
					height: 80rpx;
					padding-right: 40rpx;
				}
				.right-icon{
					width: 40rpx;
					text-align: right;
					position: absolute;
					right:30rpx;
					top: 0;
				}
				.address-info{
					width: 50%;
				}
				.checkBtn{
					display: inline-block;
					float: right;
				}
			}
			.uni-btn-v{
				margin: 30rpx;
				button{
					background-color: #fc0603;
					color: #ffffff;
				}
			}
		}
	}
</style>
